<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>
            div.c1{
                width:150px;height:100px;
                background-color:deeppink;
                float:left;
            }
            div.c2{
                width:150px;height:100px;
                background-color:greenyellow;
                float:left;
            }
            div.c3{
                width:200px;height:200px;
                background-color:yellow;
                clear:both;
            }
            #aaa::after{
                content:'';
                display:block;
                clear:both;
            }
           
        </style>
    </head>
    <body>
        <!-- 
            1. <div style='clear:both;'></div>
            2. 浮动元素的父元素加 overflow:hidden
            3. 浮动元素的父元素加 ::after{content:'';display:block;clear:both;}
            4. 在后面不浮动的元素上加 clear:both;
        -->
        <h2>CSS样式实例:清除浮动</h2>
        <!-- <div id='aaa'> -->
        <!-- <div style='overflow:hidden;'> -->
            <div class='c1'></div>
            <div class='c2'></div>
        <!-- </div> -->
        <!-- <div style='clear:both;height:10px;'></div> -->
        <div class='c3'></div>
    </body>
</html>